<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .tab_hd {
            display: flex;
        }
        .tab_hd li {
            width: 60px;
            height: 40px;
            background-color: #eee;
            text-align: center;
            line-height: 40px;
        }
        .tab_hd .active {
            background-color: #f00;
            color: #fff;
        }
        .tab_bd li {
            display: none;
            width: 180px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            background-color: green;
            
        }
        .tab_bd .show {
            display: block;
        }
    </style>
</head>
<body>

    <div class="tab" id="a">
        <ul class="tab_hd">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol class="tab_bd">
            <li class="show">1111</li>
            <li>2222</li>
            <li>3333</li>
        </ol>
    </div>


    <div class="tab" id="b">
        <ul class="tab_hd">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol class="tab_bd">
            <li class="show">1111</li>
            <li>2222</li>
            <li>3333</li>
        </ol>
    </div>

    <script>

        // function tab () {
        //     const oTab = document.querySelector('.tab') ;
        //     const oLis1 = oTab.querySelectorAll('ul li') ;
        //     const oLis2 = oTab.querySelectorAll('ol li') ;

        //     // 循环事件绑定
        //     oLis1.forEach((v , j) => {
        //         v.onclick = function() {
        //             // 清除所有的
        //             // 遍历
        //             oLis1.forEach((val , i) => {
        //                 val.classList.remove('active') ;
        //                 oLis2[i].classList.remove('show') ;
        //             })
                    

        //             // 当前显示
        //             oLis1[j].classList.add('active') ;
        //             oLis2[j].classList.add('show') ;

        //         }
        //     })
        // }




        function Tab(selector) {
            this.oTab = document.querySelector(selector) ;
            this.oLis1 = this.oTab.querySelectorAll('ul li') ;
            this.oLis2 = this.oTab.querySelectorAll('ol li') ;
            this.init() ;
        }

        Tab.prototype.init = function() {
            // 循环事件绑定
            this.oLis1.forEach((v , j) => {
                v.onclick = () => {
                    // 清除所有的
                    // 遍历
                    this.oLis1.forEach((val , i) => {
                        val.classList.remove('active') ;
                        this.oLis2[i].classList.remove('show') ;
                    })
                    

                    // 当前显示
                    this.oLis1[j].classList.add('active') ;
                    this.oLis2[j].classList.add('show') ;

                }
            })
        }


        const t = new Tab('#a') ;
        // t.fn() ;


        const t2 = new Tab('#b') ;
        // t2.fn() ;





    </script>
    
</body>
</html>